import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Menu } from "tdesign-react";
import MenuItem from "tdesign-react/es/menu/MenuItem";
import { Wifi1Icon, ArrowTriangleUpIcon, ChatMessageIcon } from "tdesign-icons-react";

export default function Menus() {
  const [active, setActive] = useState("/");
  const navigate = useNavigate();

  useEffect(() => {
    navigate(active);
  }, [active]);

  return (
    <Menu
      value={active}
      onChange={(v) => setActive(v)}
      logo={
        <img
          src="https://tdesign.gtimg.com/site/baseLogo-light.png"
          height="28"
          alt="logo"
        />
      }
      style={{ marginRight: 20 }}
    >
      <MenuItem value="/" icon={<Wifi1Icon />}>
        建立直连
      </MenuItem>
      <MenuItem value="/sender" icon={<ArrowTriangleUpIcon />}>
        发送文件
      </MenuItem>
      <MenuItem value="/chat" icon={<ChatMessageIcon />}>长文消息</MenuItem>
      <MenuItem value="/pdf" icon={<ChatMessageIcon />}>pdf阅读器</MenuItem>
    </Menu>
  );
}
